import React, {useState, memo} from 'react';
import {ActionSheet, Colors, Text} from 'react-native-ui-lib';

function Actions({action, setAction}) {
  const options =
    action?.options?.map?.((item, index) => {
      return {
        label: <Text style={{color: Colors.colorTextBase}}>{item?.label}</Text>,
        onPress: item?.onPress,
        disabled: item?.disabled,
      };
    }) ?? [];

  return (
    <ActionSheet
      {...action}
      destructiveButtonIndex={0}
      options={[
        ...options,
        {
          label: <Text style={{color: Colors.red20}}>取消</Text>,
          onPress: () => {
            setAction(s => ({
              ...s,
              visible: false,
            }));
          },
        },
      ]}
      useNativeIOS={true}
      showCancelButton={false}
      dialogStyle={{
        backgroundColor: Colors.backgroundColor,
      }}
      containerStyle={{
        backgroundColor: Colors.backgroundColor,
      }}
    />
  );
}

export default memo(Actions);
